<template>
    <div class="loading">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</template>

<style lang="scss">
@import '../static/style/variable.scss';

@keyframes loading{
    0% {
        transform: scaleY(.3);
    }
    50% {
        transform: scaleY(1.2);
    }
    100% {
        transform: scaleY(.3);
    }
}
.loading {
    padding: 1.3333rem 0;
    ul {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        li {
            width: .08rem;
            background-color: $loadingColor;
            margin: 0 .1333rem;

            &:nth-child(1) {
                height: .8rem;
                animation: loading .3s infinite linear;
            }

            &:nth-child(2) {
                height: 1.3333rem;
                animation: loading .5s infinite linear;
            }

            &:nth-child(3) {
                height: 1.8667rem;
                animation: loading .7s infinite linear;
            }

            &:nth-child(4) {
                height: 1.6rem;
                animation: loading .6s infinite linear;
            }

            &:nth-child(5) {
                height: 1.4667rem;
                animation: loading .5s infinite linear;
            }

            &:nth-child(6) {
                height: 1.0667rem;
                animation: loading .4s infinite linear;
            }
        }
    }
}</style>